import React,{ Component } from "react";
import { Text,View,Button,StyleSheet,TouchableOpacity,Image,TouchableHighlight } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
import Icon from "react-native-vector-icons/Ionicons"
export default class column extends Component {
    constructor(props){
        super(props);
        this.state = {
            title:"On Thanks",
            page: 1,
            dataValue: [],
            refreshstate: RefreshState.Idle,
        }
    }
    componentDidMount(): void {   //初始加载是数据
        this.HeaderRefresh();
    }
    HeaderRefresh = () => {  //上拉刷新
        this.setState({
            page: 1,
            refreshstate: RefreshState.HeaderRefreshing
        });
        fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=share&limit=10`)
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    dataValue: responseJson.data,
                    refreshstate: RefreshState.Idle,
                    page: this.state.page + 1
                });
            })
            .catch(error => {
                this.setState({
                    refreshstate: RefreshState.Failure
                });
            });
    }
    FooterRefresh = () => {  //下拉加载
        this.setState({
            refreshstate: RefreshState.FooterRefreshing
        });
        fetch(
            `https://cnodejs.org/api/v1/topics?page=${
                this.state.page
                }&tab=share&limit=10`
        )
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    dataValue: [...this.state.dataValue, ...responseJson.data],
                    refreshstate: RefreshState.Idle,
                    page: this.state.page + 1
                });
            })
            .catch(error => {
                this.setState({
                    refreshstate: RefreshState.Failure
                });
            });
    }
    static navigationOptions  = (({ navigation })=>{
        return {
            title:navigation.getParam("title"),
            headerRight:(
                <TouchableOpacity onPress={()=>{
                    navigation.navigate("search",{ id:"123" })
                }}>
                <View style={ styles.topBar }>
                   <Icon name="ios-search" size={30} color="white" />
               </View>
                </TouchableOpacity>
            )
        }
    })
    render(){
        return (
        <View style={ { flex:1} }>
            <RefreshListView
                style={{ flex: 1 }}
                data={this.state.dataValue}
                renderItem={({ item,index }) => (
                    <TouchableHighlight
                        onPress={() => {
                            this.props.navigation.navigate("picture", {
                                id: "123",
                            });
                        }}
                    >
                        <View style={{ width: "100%" }} key={ index }>
                            <View style={ styles.container }>
                                <Image style={ styles.Images } resizeMode="cover" source={ require('../image/15.jpg') }></Image>
                                <View style={ styles.content }>
                                    <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
                                        {item.author.loginname} { this.props.navigation.getParam("title") }
                                    </Text>
                                    <Text style={ styles.textData }>
                                        2017-10-01
                                    </Text>
                                </View>
                            </View>
                            <View
                                style={{
                                    width: "100%",
                                    height: 2,
                                    backgroundColor: "#f6f6f6",
                                    marginBottom: 10
                                }}
                            />
                        </View>
                    </TouchableHighlight>
                )}
                refreshState={this.state.refreshstate}
                onFooterRefresh={this.FooterRefresh}
                onHeaderRefresh={this.HeaderRefresh}
            />
        </View>

        )
    }
}
const styles = StyleSheet.create({
    topBar:{
        marginRight: 20
    },
    container: {
        height: 85,
        backgroundColor: "white",
        marginTop: 10,
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'space-around',
    },
    Images:{
        height:60,
        width:137,
        marginLeft:15,
        borderRadius:4
    },
    text:{
        fontSize:15,
        marginBottom: 5
    },
    content:{
        flex:1,
        marginLeft: 15,
        marginRight: 15,
    },
    textData:{
        color:'#999999'
    }
})